<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子组件的通信-字传父-自定义事件</title>
</head>
<body>
<!--
■props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中。
■我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成。
■什么时候需要自定义事件呢?
  口当子组件需要向父组件传递数据时,就要用到自定义事件了。
  口我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。
■自定义事件的流程:
  口在子组件中,通过$emit()来触发事件。
  口在父组件中，通过v-on来监听子组件事件。
-->

<!--
■在下面的代码中,我直接将Vue实例当做父组件,并且其中包含子组件来简化代码
■真实的开发中, Vue实例和子组件的通信和父组件和子组件的通信过程是一样
-->

<div id="app">
  <!--  监听自定义item-click事件，事件触发调用parentBtnClick方法，并且传入默认值item-->
  <my-div v-on:item-click="parentBtnClick"></my-div>

</div>


<!--定义组件模板-->
<template id="myDiv">
  <!--  绑定了点击事件，点击事件触发调用btnClick方法，并且传入item参数，btnClick方法中会传递一个自定义事件给父组件-->
  <div>
    <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>


<script src="../js/vue.js"></script>
<script>

  //【构造子组件对象（vue实例的子组件）】
  const myDiv = {
    template: "#myDiv",
    data() {
      return {
        categories: [
          {id: 1, name: "热门推荐"},
          {id: 1, name: "手机数码"},
          {id: 1, name: "生活服务"},
          {id: 1, name: "家用电器"},
          {id: 1, name: "电脑办公"}]
      }
    },
    methods: { //组件调用的方法
      btnClick(item) {
        console.log("子组件中【" + item.name + "】被点击")
        //自定义事件，并且传入默认值，这里是定义了一个item-click事件，并且默认传入item值，向上传递，由父组件监听使用
        this.$emit("item-click", item)
      }
    }
  }

  //根组件vue实例（也是myDiv组件的父组件）
  const app = new Vue({
    el: "#app",
    data: {
      message: "vue app"
    },
    // 【局部组件注册】
    // 注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件对象
    components: {
      myDiv //注册组件，这是es6增强写法，同名可省略，相当于myDiv : myDiv
    },
    methods: { // 定义的方法，这些定义的方法也是只有在el 挂在的元素标签的内部才能使用解析
      parentBtnClick(item) {
        console.log("父组件监听item-click事件调用:");
        console.log(item);
      }
    }
  });
</script>
</body>
</html>